<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<xiong-big></xiong-big>
			<xiong-er></xiong-er>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 兄弟组件传值：需要借助事件中心
			// 事件中心：就是一个新的 Vue 实例

			// 这个实例，就是事件中心
			var bus = new Vue({})

			Vue.component('xiong-big', {
				data: function () {
					return {
						name: '熊大',
						info: ''
					}
				},
				template: `
			    <div>
				    <p>{{ name }}</p>
            <p>找谁玩？ {{ info }}</p>
			      <button @click="handle">发送事件</button>
				    <hr />
			    </div>
			   `,
				mounted() {
					bus.$on('qiang', (params) => {
						console.log(params)
						this.info = params
					})
				},
				methods: {
					handle() {
						bus.$emit('weng', '那好吧')
					}
				}
			})

			Vue.component('xiong-er', {
				data: function () {
					return {
						name: '熊二',
						info: ''
					}
				},
				template: `
			    <div>
				    <p>{{ name }}</p>
				    <p>你确定？{{ info }}</p>
			      <button @click="handle">发送事件</button>
				    <hr />
			    </div>
			   `,
				mounted() {
					bus.$on('weng', (params) => {
						console.log(params)
						this.info = params
					})
				},
				methods: {
					handle() {
						// qiang 是自定义的事件名称
						// 这个事件是挂载到 bus 这个事件中心中的
						// 所以需要在 bus 这个事件中心中调用这个事件
						bus.$emit('qiang', '光头强')
					}
				}
			})

			var vm = new Vue({
				el: '.box',
				data: {}
			})
		</script>
	</body>
</html>
